<template>
  <view class="w-full h-screen bg-[#f8f9fb] flex flex-col">
    <view class="m-4 p-4 rounded-2xl shadow bg-white pb-[400rpx]">
      <view class="flex items-center justify-between">
        <view class="flex items-center">
          <image
            src="https://youke1.picui.cn/s1/2025/09/23/68d213ce3793e.jpg"
            class="w-[80rpx] h-[80rpx] rounded-full mr-3"
            mode="scaleToFill"
          />
          <view>
            <text class="text-sm font-bold">张三</text>
            <view class="text-xs text-gray-400">{{
              dayjs().format('YYYY-MM-DD HH:mm')
            }}</view>
          </view>
        </view>
      </view>

      <wd-textarea
        v-model="content"
        placeholder="编写投诉"
        auto-height
        :border="false"
        class="mt-1 text-sm text-gray-700"
      />

      <view v-if="images.length" class="flex flex-wrap gap-2">
        <view
          v-for="(img, index) in images"
          :key="index"
          class="relative overflow-hidden"
          :style="{
            width: images.length === 1 ? '100%' : 'calc(50% - 10rpx)',
            aspectRatio: '16 / 9'
          }"
        >
          <image
            :src="img"
            mode="widthFix"
            class="w-full h-full"
            @click="previewImage(index)"
          />
          <view
            class="absolute top-1 right-1 bg-black bg-opacity-50 rounded-full w-5 h-5 flex items-center justify-center"
            @click.stop="removeImage(index)"
          >
            <text class="text-xs text-white">×</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部上传栏 -->
    <view
      class="fixed left-0 right-0 bottom-0 bg-white flex items-center px-4 py-3 border-t border-gray-200 safe-area-inset-bottom"
    >
      <view
        class="flex items-center text-[#2563eb] text-sm"
        @click="chooseImage"
      >
        <wd-icon name="fill-camera" color="#2563eb" size="60rpx"></wd-icon>
        <text>上传图片</text>
      </view>
      <view
        class="flex items-center text-[#2563eb] text-sm ml-auto"
        @click="submitComplaint"
      >
        <text>提交投诉</text>
        <wd-icon name="arrow-right" color="#2563eb" size="60rpx"></wd-icon>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'
import { uploadImage } from '@/utils/upload'
import { addComplaint } from '@/api/complaint'
import { ref } from 'vue'

const content = ref('')
const images = ref<string[]>([])

// 选择图片
const chooseImage = async () => {
  const url = await uploadImage()
  images.value.push(url)
}

// 删除图片
const removeImage = (index: number) => {
  images.value.splice(index, 1)
}

// 预览大图
const previewImage = (index: number) => {
  uni.previewImage({
    current: images.value[index],
    urls: images.value
  })
}

// 提交投诉
const submitComplaint = async () => {
  if (!content.value) {
    uni.showToast({
      title: '请输入投诉内容',
      icon: 'none'
    })
    return
  }
  if (images.value.length === 0) {
    uni.showToast({
      title: '请上传投诉图片',
      icon: 'none'
    })
    return
  }
  await addComplaint({
    user_id: 1,
    content: content.value,
    images: images.value.join(',')
  })
  uni.showToast({
    title: '投诉提交成功',
    icon: 'success'
  })
  content.value = ''
  images.value = []
}
</script>

<style scoped lang="scss"></style>
